<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>挂号订单</span>
            </div>
        </template>
        <!-- 提供用户表单查询 -->
        <el-form>
            <el-form-item label="就诊人">
                <el-select placeholder="请选择就诊人" v-model="patientId" @change="changUser">
                    <el-option label="请选择所有就诊人" value=""></el-option>
                    <el-option v-for="item in allUser" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="changOrder">
                    <el-option label="全部订单" value=""></el-option>
                    <el-option v-for="(item, index) in allOrderState" :key="index" :label="item.comment"
                        :value="item.status"></el-option>

                </el-select>
            </el-form-item>
        </el-form>
        <el-table boder style="margin:10px 0px" :data="AllOrder">
            <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
            <el-table-column label="医院" prop="hosname"></el-table-column>
            <el-table-column label="科室" prop="depname"></el-table-column>
            <el-table-column label="医生" prop="title"></el-table-column>
            <el-table-column label="服务费" prop="amount"></el-table-column>
            <el-table-column label="就诊人" prop="patientName"></el-table-column>
            <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
            <el-table-column label="操作">
                <template #="{ row }">
                    <el-button type="text" @click="goDetail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- //分页器 -->
        <el-pagination v-model:current-page="PageNo" v-model:page-size="PageSize" :page-sizes="[10, 20, 30, 40]"
            :background="true" :total="total" layout=" prev, pager, next, jumper,total"
            @current-change="ChangeCurrent" />
    </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { reqUserOrderInfo, reqAllUser, reqOrderState } from '@/api/user';
import { UserOrderInfoResponseData, Records, AllOrderState, AllUserResponseData, AllUser, AllOrderStateResponseData } from '@/api/user/type';
import { useRouter } from 'vue-router';
let $router = useRouter();
//分页器页码
let PageNo = ref<number>(1);
//当前页码展示几条数据
let PageSize = ref<number>(10);
//收集就诊人ID
let patientId = ref<string>('')
//订单状态
let orderStatus = ref<string>('')
//全部订单
let AllOrder = ref<Records>([]);
//总条数
let total = ref<number>(0);
//存储就诊人
let allUser = ref<AllUser>([]);
//存储全部订单状态
let allOrderState = ref<AllOrderState>([])
onMounted(() => {
    getOrderInfo();
    getData();
})
//获取订单
const getOrderInfo = async () => {
    let result: UserOrderInfoResponseData = await reqUserOrderInfo(PageNo.value, PageSize.value, patientId.value, orderStatus.value);
    if (result.code == 200) {
        //返回订单数据
        AllOrder.value = result.data.records;
        total.value = result.data.total;
    }

}
//详情按钮
let goDetail = (row: any) => {
    $router.push({ path: '/user/order', query: { orderId: row.id } })
}

//发生页码发生的事件
let ChangeCurrent = () => {
    getOrderInfo();
}
//获取就诊人订单状态
const getData = async () => {
    const result: AllUserResponseData = await reqAllUser();
    allUser.value = result.data;
    //获取全部订单状态
    const result1: AllOrderStateResponseData = await reqOrderState();
    allOrderState.value = result1.data;
}
//select选择用户
let changUser = () => {
    getOrderInfo();
}
//选择订单
let changOrder = () => {
    getOrderInfo();
}
</script>

<style scoped></style>